<template>
	<view>
		<NavBar text='支付方式'></NavBar>
		<view style="width: 100%; height: 120rpx;"></view>
		<view style="background-color: #cae3ff;">
			<view style="width: 90%; margin:0 auto; line-height: 100rpx; color: #3092ef; font-size: 30rpx;">
				请15分钟内完成支付，超时订单自动取消
			</view>
		</view>
		<view class="zstyle">
			<view style="width: 90%; margin:0 auto;">
				<view style="border-bottom: 1rpx solid #f5f5f5;">
					<view style="width: 100%; height: 20rpx;"></view>
					<view class="flx">

						<view class="flx1">
							<view class="zstyle_border_text" style="color: #a5a5a5; ">视频问诊</view>
							<view class="zstyle_border_text" style="color: #333; font-size: 30rpx; margin-left:20rpx;">
								张三三</view>
						</view>
						<view>
							<view class="zstyle_border_text_ u-line-1" style="color:red;">{{blinfo.yy}}</view>
						</view>

					</view>
					<view style="width: 100%; height: 20rpx;"></view>
				</view>

				<!-- 	<view class="flx zstyle_border">
					<view class="zstyle_border_text">手机号</view>
					<view class="flx1">
						<view class="zstyle_border_text_ u-line-1 flxAlign">
							<input style="width: 100%; margin-top: 28rpx;" v-model="value" placeholder="请输入手机号" />
						</view>
						<view class="flxAlign">
							<u-icon name="arrow-right" color="#cecece" size="20"></u-icon>
						</view>
					</view>
				</view> -->
				<view class="flx zstyle_border">
					<view class="zstyle_border_text" style="font-weight: 600; color: #333;">预约时间</view>
					<view class="flx1">
						<view class="zstyle_border_text_ u-line-1">{{blinfo.date}}</view>
						<view class="flxAlign">
							<u-icon name="arrow-right" color="#cecece" size="20"></u-icon>
						</view>
					</view>
				</view>
				<view class="flx zstyle_border">
					<view class="zstyle_border_text">联系电话</view>
					<view class="flx1">
						<view class="zstyle_border_text_ u-line-1" style="color: #333;">15911111111</view>
					</view>
				</view>
				<view class="flx zstyle_border">
					<view class="zstyle_border_text" style="font-weight: 600; color: #333;">优惠券抵扣</view>
					<view class="flx1">
						<view class="zstyle_border_text_ u-line-1">无可用优惠券</view>
						<view class="flxAlign">
							<u-icon name="arrow-right" color="#cecece" size="20"></u-icon>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view style="width: 100%; line-height: 50rpx; background-color: #f5f5f5; font-size: 30rpx;">
			<view style="width: 90%; margin:0 auto;">
				选择实付方式
			</view>
		</view>
		<u-radio-group v-model="checked" iconPlacement="right" placement='column'>
			<view style="width: 90%; margin:0 auto;">
				<view class="flx" style="margin-top:40rpx;">
					<view class="flx1">
						<view class="imasge">
							<image src="/static/reservationRegister/zfb.png"></image>
						</view>
						<view style="margin-left: 20rpx;">支付宝</view>
					</view>
					<view>
						<u-radio :name="1" shape="circle"></u-radio>
					</view>
				</view>
				<view class="flx" style="margin-top:40rpx;">
					<view class="flx1">
						<view class="imasge">
							<image src="/static/reservationRegister/wx.png"></image>
						</view>
						<view style="margin-left: 20rpx;">微信</view>
					</view>
					<view>
						<u-radio :name="3" shape="circle"></u-radio>
					</view>
				</view>
			</view>
		</u-radio-group>
		<view style="line-height: 100rpx; font-size: 25rpx; color: #a5a5a5;">
			<view style="width: 90%; margin:0 auto;">
				费用由医生自行设定，此平台不收取任何额外费用
			</view>
		</view>
		<view style="font-size: 25rpx; color:#333; margin-left: 25rpx; line-height: 40rpx; width: 90%; margin:0 auto; margin-top:30rpx;">
			<view style="font-size: 40rpx; font-weight: 600;">买家须知:</view>
			<view style="margin-top: 30rpx;">1.服务流程:选择需要预约的时间段，由医生在预约时间段内拨打您视频问诊。</view>
			<view>2.医生本人视频，请确保您在预约设备正常运行</view>
			<view>3.未接通或视频失败全额退款，如通话意外中断医生会再次发起视频。</view>
		</view>
		
		<view style="position: fixed; bottom: 0; border-top: 1rpx solid #cecece; width: 100%;" class="flx">
			
				<view class="flx1" style="line-height: 100rpx; margin-left: 20rpx;">
					<view style="color: #333; font-size: 30rpx;">实际支付</view>
					<view style="color: red; font-size: 30rpx; margin-left:20rpx;">￥80</view>
				</view>
				<view style="width: 250rpx; height: 100rpx; line-height: 100rpx; color: #fff; background-color: #3092ef; text-align: center;" @click="zfwc">
					立即支付
				</view>
			
		</view>

	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				checked: '',
				values: '',
				value: '',
				value1: '',
				fileList1: [],
				yhinfo: {
					name: '林开支',
					ks: '产科',
					date: '主任医师',
				},
				blinfo: {
					yy: '￥88/15分钟',
					label: '普通患者',
					zyy: '李莉莉的健康信息',
					message: '转诊原因转诊原因转诊原因',
					zd: '斑疹伤寒',
					info: '病情描述病情描述病情描述',
					date: '选择时间'
				},
				radiolist1: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				radiovalue1: '是',
			}
		},
		methods: {
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			ljjn() {
				uni.navigateTo({
					url: '/pages/OnlineConsultation/ljjf'
				})
			},
			zfwc(){
				uni.$u.toast('支付完成！');
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/OnlineConsultation/ltzx'
					})
				},1000)
				
			}
		}
	}
</script>

<style lang="scss">
	.name {
		font-size: 30rpx;
		line-height: 50rpx;
		color: #333;
		font-weight: 600;
	}

	.sex {
		font-size: 30rpx;
		line-height: 50rpx;
		color: #a6a6a6;
		margin-left: 15rpx;
	}

	.age {
		font-size: 30rpx;
		line-height: 50rpx;
		color: #a6a6a6;
		// margin-left: 15rpx;
	}

	.zstyle {
		width: 100%;
		background-color: #fff;

		.zstyle_border {
			border-bottom: 1rpx solid #f5f5f5;
			line-height: 100rpx;

			.zstyle_border_text {
				font-size: 30rpx;
				color: #333;
				width: 28%;
				// text-align: end;
			}

			.zstyle_border_text_ {
				width: 100%;
				width: 330rpx;
				font-size: 30rpx;
				color: #a6a6a6;
				text-align: end;
			}
		}
	}

	.button {
		width: 85%;
		margin: 0 auto;
		background-color: #ffcc33;
		line-height: 80rpx;
		color: #fff;
		text-align: center;
		letter-spacing: 1rpx;
		border-radius: 45rpx;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.imasge {
		width: 40rpx;
		height: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>